<!--
 * @Author: your name
 * @Date: 2020-08-03 17:05:35
 * @LastEditTime: 2020-08-03 19:27:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devops\VueElementUINew\src\views\product\components\header.vue
-->
<template>
  <div class="product-header">
    <ul>
      <li v-for="item in filters" :key="item.value">{{ item.label }}</li>
    </ul>
    <div>
      <i class="el-icon-s-fold"></i>
      <i class="el-icon-s-unfold"></i>
      <i class="el-icon-more"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StateFilter',
  data() {
    return {
      filters: [{
        label: '所有',
        value: 1
      }, {
        label: '未关闭',
        value: 2
      }, {
        label: '指派给我',
        value: 3
      }, {
        label: '我创建',
        value: 4
      }, {
        label: '我评审',
        value: 5
      }, {
        label: '草稿',
        value: 6
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.product-header {
  font-size: 14px;
  color: #999;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  ul {
    list-style: none;
    display: flex;
    align-items: center;
    li {
      padding: 4px 20px;
      border-left: 1px solid #E1E1E1;
      line-height: 14px;
      &:first-child {
        border-left: none;
      }
      cursor: pointer;
      &.active {
        color: #4680FF;
      }
    }
  }
  & > div {

  }
}
</style>